﻿@using Microsoft.AspNetCore.Mvc.RazorPages
@model JTWEB3.Views.Home.IndexModel
@{
    ViewData["Title"] = "网站首页";
}
<style>
    div.detection {
        padding: 3rem;
        background-color: #e9ecef;
    }
</style>

@*轮播*@
<div id="demo" class="carousel slide visible-lg" data-ride="carousel">
    <!-- 指示符 -->
    <ul class="carousel-indicators">
        <li data-target="#demo" data-slide-to="0" class="active"></li>
        <li data-target="#demo" data-slide-to="1"></li>
        <li data-target="#demo" data-slide-to="2"></li>
    </ul>

    <!-- 轮播图片 -->
    <div class="carousel-inner" html-ac>


        <!-- @*123131*@ -->


        <div class="carousel-item active">
            <img src="~/images/banner1.svg">
        </div>

        <div class="carousel-item">
            <img src="~/images/banner2.svg">
        </div><div class="carousel-item">
            <img src="~/images/banner3.svg">
        </div>



    </div>

    <!-- 左右切换按钮 -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>

</div>
<div class="container">
    <div class="row mt-3 detection">
        <div class="col-sm-6 text-center">

            @*企业检测*@
            <img src="~/images/2008523103025100.jpg" alt="企业检测" />

        </div>
        <div class="col-sm-6 text-center">
            <h2>企业检测</h2>

            <div class="row">
                <div class="text-left pl-5 pt-3 col-sm-6">
                    <p>1、环境影响评价检测</p>
                    <p>2、工程竣工验收检测</p>
                    <p>3、污染源委托检测</p>
                    <p>4、室内空气质量检测</p>
                    <p>5、场地调查检测</p>
                    <p>6、环境管理认证检测</p>
                </div>
                <div class="col-sm-6 text-center"><a href="#" class="btn btn-danger text-white vertical-center" data-toggle="modal" data-target="#postDemand">立即发布需求</a></div>
            </div>

        </div>

    </div>
    <div class="row mt-3 mb-3 detection">
        <div class="col-sm-6 text-center">
            @*个人检测*@
            <img src="~/images/a87bfe5403214df59d66b2ec0140b078.jpeg" alt="个人检测" />

        </div>
        <div class="col-sm-6 text-center">
            <h2>个人检测</h2>

            <div class="row">
                <div class="text-left pl-5 pt-3 col-sm-6">
                    <p>1、钦用水免费简易检测</p>

                </div>
                <div class="col-sm-6 text-center"><a href="#" class="btn btn-danger text-white vertical-center" data-toggle="modal" data-target="#postDemand">免费发布需求</a></div>
            </div>
        </div>
    </div>
</div>
<!-- 模态框 -->
<div class="modal fade" id="postDemand">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">发布需求</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <form action="/" method="post">
                <!-- 模态框主体 -->
                <div class="modal-body">
                    <div class="form-group">
                        <label>手机号码</label>
                        <input type="number" name="name" value="" class="form-control" />
                        <span class="text-danger"></span>
                    </div>
                    <div class="form-group">
                        <label>需求描述</label>
                        <textarea class="col-12" style="min-height:10rem"></textarea>
                        <span class="text-danger" ></span>
                    </div>
                </div>

                <!-- 模态框底部 -->
                <div class="modal-footer">
                    <button type="submit" asp-action="" class="btn btn-success" data-dismiss="modal">发送</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </form>

        </div>
    </div>
</div>
<partial name="_ValidationScriptsPartial" />
